new Vue({
    el: '#app',
    data: {
        //头部配置json
        heaIconJson: {
            left: './static/img/icon-list.png',
            middle: "<span style='text-align:center;font-size:32px;'>鲜花</span>",
            right1: './static/img/icon-search.png',
            right2: './static/img/icon-car.png'
        },
        //商品数据
        goodsInfo: [{
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }, {
            img: 'https://img.thebeastshop.com/image/20180918173031174479.jpg@4e_0o_0l_345h_330w_90q.jpg',
            badge: 'Bio-E',
            name: '天然柠檬麦卢卡酵素 500ml',
            price: '139.00',
            explain: '海外购'
        }],
    },
    mounted: function() {
        var This = this;
        setTimeout(function() {
            This.typeAni();
        }, 500);
    },
    methods: {
        // 初始化种类动态效果
        typeAni: function() {
            // 放数据
            var arr = ["鲜花", '玫瑰', '百合', '牡丹', '康乃系'];
            var len = arr.length;
            var el = $('.node a');
            var time = len * 250;
            for (var i = 0; i < len; i++) {
                $(el[i]).html(arr[i]);
            }
            $('.node').eq(len + 1).remove()

            //初始化
            var el = $('#type-ani');
            var $sashimi = $('.sashimi');
            var contorllAni = true;
            var contorllShow = true;
            $('#type-open-ani-btn').on('click', function() {
                if (contorllShow) {
                    el.show();
                    if (contorllAni) {
                        $sashimi.makisu({
                            selector: 'dd',
                            overlap: 0.2,
                            speed: 0.5
                        });
                        contorllAni = false;
                    } else {
                        $('.list').makisu('toggle');
                    }
                } else {
                    $('.list').makisu('toggle');
                    setTimeout(function() {
                        el.hide(200);
                    }, time);
                }
                contorllShow = !contorllShow;
            });

            //给分类的具体a绑定事件跳转页面
            $('.sashimi a').click(function(event) {
                //根据html的内容来进行相应的判断和跳转页面
                console.log($(this).html())

                event.preventDefault();
            });
        },
        right1: function() {
            window.location.href = HREF + 'search.html';
        },
        right2: function() {
            window.location.href = HREF + 'my-shopping-car.html';
        }
    }
});